<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绑定手机号</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <link rel="stylesheet" type="text/css" href="../../css/main.css" />

    <style>
    .back {
        width:8px !important;
        height: 15px !important;
        margin-left: 0px !important;
        background: #fff;
    }

    body {
        background-color: #fff;
    }
    #vm{
      overflow: hidden;
    }
    .telephone {
        position: relative;
    }


    .codeactive {
        color: #EA5717;
    }
    span {
        font-size: 12px;
        color: #333;
    }

    .password-fourth {
        margin-top: 50px;
        background: #ea5413;
        border-radius: 8px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        color: #fff;
        font-size: 15px;
    }
    .xieding{
      color: #EA5717;
    }
    input{
      font-size: 14px !important;
      height:1.2rem !important;
    }

    .code {
        position: absolute;
        right: 0px;
        top: 21px;
        text-align: right;
        color: #DAD9D9;
        font-size: 13px !important;
        width: 80px;
    }

    .downward {
        width: 10px;
        height: 8px;
        display:inline;
    }

    .shurukuang{
      position: absolute;
      left:67px;
    }
    .codeactive {
        color: #EA5717;
    }
    .fourth {
        margin-top: 40px !important;
        border-radius: 8px !important;
        height: 34px !important;
        text-align: center !important;
        line-height: 34px !important;
        color: #fff !important;
        font-size: 15px !important;
        background: #DAD9D9;
        width: 100%;
        border: none;
    }
    </style>
</head>

<body>
  <div id="vm" v-cloak>
    <header class="aui-bar aui-bar-nav" id="aui-header" style="background-color:#fff;">
        <a class="aui-btn aui-pull-left" tapmode onclick="CloseWin()">
            <img src="../../image/back.png" class="back" alt="">
        </a>
        <div class="aui-title" style="color:#000;">绑定手机号</div>
    </header>

    <div class="big-box">
      <div class="content">
          <div class="telephone" >
              <span onclick="Openphone()">+{{guojianumber}}<img src="../../image/login/downward.png" class="downward"></span>
              <input type="text" placeholder="请输入手机号" style="text-align:left;position:absolute;bottom:4px;left:70px;width:54%;" v-model="phonevalue" v-on:input="mobileinput">
              <img src="../../image/login/delete.png" class="delete" v-if="isshowdelete"  @click="qingchu()">
          </div>
          <div class="telephone">
            验证码
            <input type="text" placeholder="短信验证码"  style="text-align:left;position:absolute;bottom:4px;left:70px" v-model="msg"  v-on:input="msginput">
            <input type="button"  value="获取验证码" class="code" id="dao" @click="countdown()">
          </div>
          <button class="fourth" @click="submit()" disabled v-if="isbukedianji">绑定</button>
          <button class="fourth" @click="submit()" v-else>绑定</button>
      </div>
        <!-- <div class="verify-safely">
          <span onclick="Openphone()" style="background:#fff;">
            +{{guojianumber}} <img src="../../image/login/downward.png" class="downward">

          </span>
            <input type="text" placeholder="请输入手机号" class="in" v-model="phonevalue"  v-on:input="mobileinput">
            <img src="../../image/login/delete.png" class="de" @click="qingchu()" >
        </div>
        <div class="verify-safe">
            验证码
            <input type="text" placeholder="验证码" class="in1" v-model="msg" v-on:input="msginput">
            <input type="button" class="bttn" value="获取验证码" v-on:click="countdown();" id="dao">
        </div>

        <div class="verify-below" v-on:click="submit()">
            完成
        </div> -->
    </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
//关闭

var uid,session,mobile;

var vm = new Vue({
    el: '#vm',
    data: {
        phonevalue: '',
        msg:'',
        guojianumber:'86',
        // thirdbindflag:false,
        isshowdelete: false,
        passwordvalue: '',
        isbukedianji: true

    },
    created: function() {
        var _this = this;
        apiready = function() {
            _this.init();
            api.parseTapmode();
            var header = $api.byId('aui-header');
            $api.fixStatusBar(header);
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
        }
    },
    methods: {
        init: function() {
            var _this = this;
            api.addEventListener({
                name: 'keyback'
            }, function(ret, err){
                  api.closeWin();
            });
            _this.msg = '';
            _this.phonevalue = $api.getStorage('mobile1');
            // if(api.pageParam.uidvalue){
              // uid =api.pageParam.uidvalue
              // session =api.pageParam.sessionvalue
              // _this.thirdbindflag=true;
            // }else{
              uid = $api.getStorage('uid');
              session = $api.getStorage('session');
              // _this.thirdbindflag=false;
            // }

            api.addEventListener({
                name: 'number'
            }, function(ret, err){
                if( ret ){
                  _this.guojianumber = ret.value.number
                }
            });

        },
        addinput: function() {
            var _this = this;
            _this.passwordvalue = _this.passwordvalue.replace(/[^\w\/]/ig, '');
            _this.passwordvalue = _this.passwordvalue.substr(0, 16);

        },
        mobileinput() {
            var _this = this;
            if (_this.phonevalue.length > 0){
              _this.isshowdelete = true;
              $('.code').addClass('codeactive');

            }else{
              _this.isshowdelete = false;
              $('.code').removeClass('codeactive');

            }
            if (this.phonevalue && this.msg) {
                $('.fourth').addClass('fourthactive');
                _this.isbukedianji = false;
            } else {
                $('.fourth').removeClass('fourthactive');
                _this.isbukedianji = true;
            }

        },

        qingchu:function(){
             var _this = this;
             _this.phonevalue='';
             _this.isshowdelete = false

        },
        msginput(){
          this.msg = this.msg.substr(0,4);
          // if (this.msg) {
          //     $('.code').addClass('codeactive');
          // } else {
          //     $('.code').removeClass('codeactive');
          // }
          if (this.phonevalue && this.msg) {
              $('.fourth').addClass('fourthactive');
              this.isbukedianji = false;
          } else {
              $('.fourth').removeClass('fourthactive');
              this.isbukedianji = true;
          }
        },
        submit: function() {
            var _this = this;
            if (M.phone(_this.phonevalue)) {
                if (M.yanzhengma(_this.msg)) {
                    new rest().get('modifyMobile').datae({
                        'mobile': _this.guojianumber+_this.phonevalue,
                        'msg': _this.msg,
                        'type': 1,
                        '_uid':uid,
                        'session': session
                    }).success(function(res) {
                      $api.setStorage('mobile', _this.guojianumber+_this.phonevalue);

                      console.log(res)
                        if (res.flag == 0) {
                            api.toast({
                                msg: res.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                            setTimeout(function() {
                                api.closeWin();
                            }, 200)
                        } else {
                            setTimeout(function() {
                              api.closeWin({
                                  name: 'verify1'
                              });
                                api.closeWin();
                            }, 200)

                        }
                    }).error(function(err) {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }).run()
                }
            }
        },
        countdown: function() {
            var _this = this;
            var name = document.getElementById("dao").className;
            if (M.phone(_this.phonevalue)) {
                new rest().get('sendSms').datae({
                    'mobile':_this.guojianumber+_this.phonevalue
                }).success(function(res) {
                    if (res.flag == 1) {
                        api.toast({
                            msg: '发送成功',
                            duration: 2000,
                            location: 'middle'
                        });
                        msgflag = true;
                        M.daojishi(msgflag, name)
                    } else {
                        msgflag = false;
                        M.daojishi(msgflag, name)
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    api.toast({
                        msg: err.msg,
                        duration: 2000,
                        location: 'middle'
                    });

                }).run()
            }
        },
    }
})
    function CloseWin(){
      api.closeWin();

    }

    function Openphone() {
        api.openWin({
            name: 'arearegion',
            url: './area-region-win.html',

        });
    }
</script>
</html>
